<template>
  <div>
    <el-button type="primary" @click="add">添加商品</el-button>
    <el-button type="primary" @click="xiugai">修改商品</el-button>
    <el-table
        :data="tableData"
        border
        height="650"
        style="width: 100%"
        @selection-change="handleSelectionChange">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
          prop="id"
          label="序号">
      </el-table-column>
      <el-table-column
          prop="name"
          label="商品名称">
      </el-table-column>
      <el-table-column
          prop="descc"
          label="商品描述">
      </el-table-column>
      <el-table-column label="商品图片" align="center" prop="image" width="100">
        <template slot-scope="scope">
          <img :src="scope.row.image" :width="50" :height="50"/>
        </template>
      </el-table-column>
      <el-table-column
          prop="price"
          label="商品价格">
      </el-table-column>
      <el-table-column
          prop="nums"
          label="已兑换数量">
      </el-table-column>
      <el-table-column
          prop="score"
          label="积分">
      </el-table-column>
      <el-table-column
          prop="goodsId"
          label="商品编号">
      </el-table-column>
      <el-table-column
          prop="status"
          label="状态">
        <template slot-scope="scope">
          <el-tag type="success" v-if="scope.row.status == 1">已上架</el-tag>
          <el-tag type="warning" v-if="scope.row.status == 2">已下架</el-tag>
          <el-tag type="info" v-if="scope.row.status == 3">未上架</el-tag>
        </template>
      </el-table-column>
      <el-table-column
          fixed="right"
          label="操作"
          width="100">
        <template slot-scope="scope">
          <el-button @click="chakan(scope.row.id)" type="text" size="small">查看</el-button>
          <el-button @click="shangjia(scope.row.id)" type="text" size="small" v-if="scope.row.status==3 || scope.row.status==2">上架</el-button>
          <el-button @click="xiajia(scope.row.id)" type="text" size="small" v-if="scope.row.status==3 || scope.row.status==1">下架</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
        title="详情界面"
        :visible.sync="dialogVisible">
     序号：{{qing.id}}<br><br>
      商品名称：{{qing.name}}<br><br>
      商品描述：{{qing.descc}}<br><br>
      商品图片：<img :src="qing.image" :width="100" :height="100"><br><br>
      商品价格：{{qing.price}}<br><br>
      已兑换数量：{{qing.nums}}<br><br>
      积分：{{qing.score}}<br><br>
      商品编号：{{qing.goodsId}}<br><br>
    </el-dialog>

    <el-dialog
      :title="mode.title"
      :visible.sync="dialogVisible1">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="商品名称">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="商品描述">
        <el-input v-model="form.descc"></el-input>
      </el-form-item>
        <el-form-item label="商品图片">
        <el-upload
          class="avatar-uploader"
          action="http://localhost:6001/goods/good/fileUpload"
          name="file"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload">
          <img v-if="imageUrl" :src="imageUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
          </el-form-item>
        <el-form-item label="商品价格">
          <el-input v-model="form.price"></el-input>
        </el-form-item>
        <el-form-item label="积分">
          <el-input v-model="form.score"></el-input>
          </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">立即创建</el-button>
          <el-button @click="dialogVisible1 = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      tableData: [],
      dialogVisible: false,
      dialogVisible1: false,
      qing:{},
      form:{
        image: '',
        name: '',
        descc: '',
        price: '',
        score: ''
      },
      imageUrl: '',
      mode:{url:'',title:''},
      multipleSelection: []
    }
  },
  methods: {
    findPage(){
      axios.post(`/goods/good/findGoods`).then(res=>{
        console.log(res)
        this.tableData = res.data.data.goodsList;
      })
    },
    chakan(id) {
      axios.post(`http://localhost:6001/goods/good/findGoodsById?id=${id}`).then(res=>{
        console.log(res)
        this.qing = res.data.data.goods;
        this.dialogVisible = true;
      })
    },
    shangjia(id) {
      this.$confirm('确认上架吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        axios.post(`http://localhost:6001/goods/good/shangGoods?id=${id}`).then(res=>{
          if (res.data.code ==1){
            this.$message.success('成功上架');
            this.findPage();
          }else {
            this.$message.error('上架失败');
          }
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    },
    xiajia(id) {
      this.$confirm('确认下架吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        axios.post(`http://localhost:6001/goods/good/xiaGoods?id=${id}`).then(res => {
          if (res.data.code == 1) {
            this.$message.success('成功下架');
            this.findPage();
          } else {
            this.$message.error('下架失败');
          }
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = res;
    },
    beforeAvatarUpload(file) {
      return null;
    },
    add(){
      this.mode.title = '添加商品';
      this.mode.url = '/goods/good/addGoods';
      this.dialogVisible1 = true;
      this.form = {};
    },

    onSubmit() {
      // 判断是添加还是更新操作
      if (this.mode.url === '/goods/good/addGoods') {
        this.form.image = this.imageUrl;
        axios.post(this.mode.url, this.form).then(res => {
          if (res.data.code === 1) {
            this.$message.success('添加成功');
            this.dialogVisible1 = false;
            this.findPage();
          } else {
            this.$message.error('添加失败');
          }
        });
      } else if (this.mode.url === '/goods/good/updateGoods') {
        axios.post(this.mode.url, this.form).then(res => {
          if (res.data.code === 1) {
            this.$message.success('修改成功');
            this.dialogVisible1 = false;
            this.findPage();
          } else {
            this.$message.error('修改失败');
          }
        });
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    xiugai() {
      if (this.multipleSelection.length === 0) {
        this.$message.warning('请选择要修改的商品');
        return;
      }
      if (this.multipleSelection.length > 1) {
        this.$message.warning('只能选择一个商品进行修改');
        return;
      }
      // 获取选中的商品信息
      const selectedGood = this.multipleSelection[0];
      this.mode.title = '修改商品';
      this.mode.url = '/goods/good/updateGoods';
      this.dialogVisible1 = true;
      // 将选中商品的信息填充到表单中
      this.form = {
        id: selectedGood.id,
        image: selectedGood.image,
        name: selectedGood.name,
        descc: selectedGood.descc,
        price: selectedGood.price,
        score: selectedGood.score
      };
      this.imageUrl = selectedGood.image;
    },
  },
  created() {
    this.findPage();
  }
}
</script>


<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader{
  text-align: left;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
  border: 1px solid #d9d9d9;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
